<script setup lang="ts">
import type { IPoint } from '@/lib/graphic'
import { ref, type UnwrapNestedRefs } from 'vue'

const { pos } = defineProps<{ pos: UnwrapNestedRefs<IPoint> }>()
const step = ref(0.1)
// const step$from = ref(step.value + '')
const fixed = 2
function changeNum(target: '0' | '1' | '2', isIncrease: boolean) {
  pos[target] = parseFloat((pos[target] + (isIncrease ? step.value : -step.value)).toFixed(fixed))
}
</script>
<template>
  <div v-for="target of ['0','1','2'] as ('0' | '1' | '2')[]" :key="target">
    <p>{{target}}:{{ pos[target] }}</p>
    <button @click="changeNum(target, true)">+</button>
    <button @click="changeNum(target, false)">-</button>
  </div>
  <input type="number" v-model="step" />
</template>
